<template>
    <div class="echartsItem" :class="darkControlValue?'nightBlack':'whiteBg'">
      <div class="load note-wrapper" v-if="loading">
        <img src="~@/assets/img/loading.gif" alt="">
      </div>
      <div class="change-data-container" v-if="!darkValue">
        <div class="dateBtn">
        <span v-for="item in dataBut" @click="changeData(item)"
              :class="{active:item.isActive,blueColor:item.value===2&&!item.isActive}">{{item.label}}</span>
        </div>
        <div class="ec_switch">
          <span>深色模式:</span>
          <el-switch
            @change="handleDarkControl(true)"
            v-model="darkControlValue">
          </el-switch>
        </div>
      </div>
      <div class="change-data-container2" v-if="darkValue">
        <div class="dateBtn">
        <span v-for="item in dataBut" @click="changeData(item)"
              :class="{active:item.isActive,blueColor:item.value===2&&!item.isActive}">{{item.label}}</span>
        </div>
        <div class="ec_switch_black">
          <span>深色模式:</span>
          <el-switch
            @change="handleDarkControl(false)"
            v-model="darkControlValue">
          </el-switch>
        </div>

      </div>

      <el-row :gutter="24" style="display: flex;flex-wrap: wrap;">
        <template v-for="pageItem in eChartsData">
          <!-- type ===6 -->
          <el-col :span="Number(pageItem.span)" :style="{'height':pageItem.height+'px'}" class="complete"
                  v-if="pageItem.type==6">
            <div class="content">
              <div class="header">
                <p class="title">{{pageItem.title}}</p>
                <el-tooltip :content="pageItem.describes" placement="top">
                  <span class="el-icon-question cursor-pointer"></span>
                </el-tooltip>
              </div>
              <div class="center">
                <p class="num"><span class="blueColor">{{pageItem.oneValue}}</span><span class="mark">{{pageItem.oneValueSuffix}}</span>
                </p>
                <!-- <p class="note">{{pageItem.describes}}</p> -->
                <p class="statistics">
                  <span class="top_s">环比 12%</span>
                  <span class="bottom_s">同比 15.36%</span>
                </p>
              </div>
              <div class="bottom">
                <el-progress :show-text="false" :text-inside="true" :stroke-width="26" :percentage="percentage"
                             :color="pageItem.colors"></el-progress>
              </div>
            </div>
          </el-col>

          <!-- type===1 -->

          <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type==1" :style="{'height':pageItem.height+'px'}"
                  class="product">
            <div class="content">
              <div class="header">
                <p class="title">{{pageItem.title}}</p>
                <el-tooltip :content="pageItem.describes" placement="top">
                  <span class="el-icon-question cursor-pointer"></span>
                </el-tooltip>
              </div>
              <div class="center flex_between">
                <p><span class="font_50 blueColor">{{pageItem.oneValue | NumFormat}}</span><span>{{pageItem.oneValueSuffix}}</span>
                </p>
                <p>{{pageItem.twoValue | NumFormat}}<span>{{pageItem.twoValueSuffix}}</span></p>
              </div>
              <div class="bottom">
                <p><span>{{pageItem.varString }}</span></p>
                <!-- <p><span>新订单:</span><span>20车</span><span>100吨</span></p>
                      <p><span>20%</span><i class="el-icon-top"></i></p> -->
              </div>
            </div>
          </el-col>
          <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type==7" class="product"
                  :style="{'height':pageItem.height+'px'}">

            <div class="content">
              <div class="header">

                <p class="title">{{pageItem.title}}</p>
                <el-tooltip :content="pageItem.describes" placement="top">
                  <span class="el-icon-question cursor-pointer"></span>
                </el-tooltip>
              </div>
              <div class="center" style="margin-top: 9px;">
                <p>{{pageItem.threeValue | NumFormat}}</p>
              </div>
              <v-chart style="width: 100%;height: 90%;" :options="pageItem.option"></v-chart>
            </div>
          </el-col>
          <!-- type===2 -->
          <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type==2" :style="{'height':pageItem.height+'px'}"
                  class="price">
            <div class="content">
              <div class="header">
                <p class="title">{{pageItem.title}}</p>
                <el-tooltip :content="pageItem.describes" placement="top">
                  <span class="el-icon-question cursor-pointer"></span>
                </el-tooltip>
              </div>
              <div class="center">
                <div class="center-left">
                  <p><span class="font_50 blueColor">{{pageItem.oneValue | NumFormat}}</span><span>{{pageItem.oneValueSuffix}}</span></p>
                </div>
                <div class="center-right">
                  <p><span>$</span></p>
                </div>
              </div>
              <div class="bottom">
                <p><span>{{pageItem.varString}}</span></p>
              </div>
            </div>
          </el-col>
          <!-- type===3 -->
          <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type===3" :style="{'height':pageItem.height+'px'}"
                  class="product">
            <type-three :pageItem="pageItem"> {{pageItem.type}}</type-three>

          </el-col>
          <!-- type ===11 -->
          <el-col :span="Number(pageItem.span)"
                  v-else-if="pageItem.type==8  || pageItem.type==9  || pageItem.type==10  || pageItem.type==11  || pageItem.type==12  || pageItem.type==13  || pageItem.type==14   || pageItem.type==16"
                  :style="{'height':pageItem.height+'px'}" class="price">
            <div class="content">
              <div class="header" style="margin-bottom: 5px;" v-if="pageItem.type==16">
                <p class="title">{{pageItem.title}}</p>
                <el-tooltip :content="pageItem.describes" placement="top">
                  <span class="el-icon-question cursor-pointer"></span>
                </el-tooltip>
              </div>
              <v-chart @mousemove="mousemove"  style="width: 100%;height: 100%;" :options="pageItem.option"></v-chart>
              <p class="x-axis-tip"></p>
            </div>
          </el-col>
          <el-col :span="Number(pageItem.span)" v-else-if="pageItem.type==15"
                  :style="{'height':pageItem.height+'px'}" class="price">
            <div class="content">
              <v-chart style="width: 100%;height: 100%;" :options="pageItem.treemapOption" @mousemove="mousemove" ></v-chart>
              <p class="x-axis-tip"></p>
            </div>
          </el-col>
        </template>
      </el-row>

    </div>
</template>

<script>
  import ChartCard from '../ChartCard'
  import CountTo from 'vue-count-to'
  import ECharts from 'vue-echarts/components/ECharts'
  import echarts from 'echarts'
  import {
    getECharts
  } from '@/api/echarts.js'
  import $ from 'jquery'

  export default {
    props: {
      info: {
        type: Object

      }
    },
    data () {
      const rankList = []
      for (let i = 0; i < 7; i++) {
        rankList.push({
          name: '原煤 ' + (i + 1),
          total: 1234.56 - i * 100
        })
      }
      return {
        darkControlValue: false,          //   切换深夜模式和白天模式value
        dataBut: [{
          value: 1,
          label: '本年',
          isActive: true
        }, {
          value: 2,
          label: '本季度',
          isActive: false
        },
          {
            value: 3,
            label: '本月',
            isActive: false
          },
          {
            value: 4,
            label: '本周',
            isActive: false
          },
          {
            value: 5,
            label: '今日',
            isActive: false
          }
        ],
        loading: false,
        darkValue: true,
        darkValueNum: 0,
        percentage: 78,
        customColor: '#1890FF',
        rankList,
        tabPosition: '1',
        eChartsData: []
      }
    },
    methods: {
      // eCharts 移入效果
      mousemove (params) {
        if (params.componentType === 'yAxis') {
          let offsetX = params.event.event.offsetX
          let offsetY = params.event.event.offsetY
          let elm = params.event.event.target
          let children = elm.parentNode.parentNode.parentNode.childNodes
          let yAxisTip = ''
          for (let i = 0; i < children.length; i++) {
            if (children[i].className === 'x-axis-tip') {
              yAxisTip = children[i]
              break
            }
          }
          let parent = yAxisTip.parentNode
          yAxisTip.innerText = params.value
          yAxisTip.style.left = offsetX + 'px'
          yAxisTip.style.top = offsetY + 10 + 'px'
          yAxisTip.style.display = 'block'
          parent.style.position = 'relative'
        }
      },
      // 切换日期
      changeData (item) {
        this.tabPosition = item.value
        this.dataBut.forEach((element, index) => {
          if (item.value == this.dataBut[index].value) {
            this.dataBut[index].isActive = true
          } else {
            this.dataBut[index].isActive = false
          }
        })
        this.getList()
      },
      handleDarkControl (e) {
        this.darkValue = e
      if (e === true) {
          this.darkControlValue = true
        this.darkValueNum = 1
        $('#wrapperControl').removeClass('white')
          $('#wrapperControl').addClass('night')
          $('.jp-navbar').addClass('nightTop')
          $('.jp-sidebar__inner').addClass('nightTop')
          $('.jp-content').addClass('nightCenter')
          $('.jp-content').removeClass('whiteCenter')
          $('.jp-sidebar__menu').addClass('nightTop')
          $('.jp-navbar__body').addClass('nightTop')
          $('#wrapperControl').parent().addClass('nightBg')
          console.log('来了')
        } else {
          this.darkControlValue = false
        this.darkValueNum = 0
        $('.jp-content').addClass('whiteCenter')
          $('#wrapperControl').addClass('white')
          $('#wrapperControl').removeClass('night')
          $('.jp-sidebar__menu').removeClass('nightTop')
          $('.jp-navbar').removeClass('nightTop')
          $('.jp-navbar__body').removeClass('nightTop')
          $('.jp-content').removeClass('nightCenter')
          $('.jp-sidebar__inner').removeClass('nightTop')
          $('#wrapperControl').parent().removeClass('nightBg').css('background', '#EEEEEE')
        }
        localStorage.setItem('darkValue', this.darkValue)
      this.getList()
    },
      itemTitle (item) {
        let result = item.i
        if (item.static) {
          result += ' - Static'
        }
        return result
      },
      initVisitChart () {

      },
      // 获取列表带分页
      getList (e) {
        this.loading = true
        getECharts({
          pageHref: this.$route.path,
          dateFlag: this.tabPosition,
          darkValue: this.darkValueNum
        }).then((res) => {
          if (res.data.code === '200') {
            console.log(res.data.result.length)
            if(res.data.result.length){
              this.handleDataECharts(res.data.result)  // 填充eCharts 数据格式
            }else{
              this.loading = false
            }
            }
        })
      },
      // 填充 eCharts 数据格式 （完善y轴内容文字太长的遮挡问题）
      handleDataECharts (data) {
        data.forEach((item, index) => {
          let yAxis = item.option?item.option.yAxis:false
          yAxis && yAxis.forEach(child => {
            child['triggerEvent'] = true
            child['axisLabel'] = {
              'formatter': function (value) {
                let valueTxt = ''
                if (value.length > 3) {
                  valueTxt = value.substring(0, 4) + '...'
                } else {
                  valueTxt = value
                }
                return valueTxt
              }
              }
          })
        })
        this.eChartsData = data
        this.loading = false
      }

    },

    components: {
      ChartCard,
      CountTo,
      'v-chart': ECharts,
      typeThree: () => import('./type3')
    },
    mounted () {
      if (localStorage.getItem('darkValue') != null) {
        this.darkValue = JSON.parse(localStorage.getItem('darkValue'))
    } else {
        this.darkValue = true
    }

      // this.getList();
      $('.bg-white:last').css({
        'border': 'none',
        'padding': '0px'
      })
      this.handleDarkControl(this.darkValue)
      window.onresize = () => {
        setTimeout(() => {
          // this.$refs.options3.resize();
          // this.$refs.options4.resize();
        }, 100)
      }
    },
    activated () {
      this.handleDarkControl(this.darkValue)
    },
    deactivated () {
      $('#wrapperControl').removeClass('night')
      $('.jp-navbar').removeClass('nightTop')
      $('.jp-sidebar__inner').removeClass('nightTop')
      $('.jp-content').removeClass('nightCenter')
      $('#wrapperControl').parent().removeClass('nightBg')
      $('.jp-sidebar__menu').removeClass('nightTop')
      $('.jp-navbar__body').removeClass('nightTop')
    }
  }
</script>
<style lang="scss">

  .echartsItem{
    .iconfont {
      font-size: 22px !important;
      color: #999;
    }
    padding: 19px;
    box-sizing: border-box;
    min-height: 100vh;
    .x-axis-tip {
      display: none;
      position: absolute;
      padding: 5px 5px;
      font-size: 12px;
      line-height: 18px;
      color: #575757;
      background: #FFFFFF;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.20);
      border-radius: 4px;
      max-width: 280px;
      white-space: normal;
      word-break: break-all;
    }
    .change-data-container {
      width: 100%;
      display: flex;
      position: relative;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 75px 0 25px;
      /* 年月日日期 */
      .dateBtn {
        cursor: pointer;

        span {
          display: inline-block;
          padding: 4px 16px;
          font-size: 16px;
          //background: linear-gradient(90deg, #3494FF, #006DFF);
          //box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
          border-radius: 16px;
        }

      }

      /* switch 按钮 */
      .ec_switch {
        font-size: 16px;
        font-weight: 400;
        color: #7988AD;

        span {
          margin-right: 15px;
        }
      }

      /*.item {*/
      /*width: 78px;*/
      /*height: 100%;*/
      /*line-height: 42px;*/
      /*text-align: center;*/
      /*cursor: pointer;*/
      /*}*/

      .active {
        background: linear-gradient(90deg, #3494FF, #006DFF);
        border-radius: 16px;
        color: #fff;
      }

      .item:hover {
        color: rgba(26, 144, 255, 0.9);

      }

      .rightBut {
        position: absolute;
        top: 12px;
        cursor: pointer;
        right: 10px;
      }
    }

    .change-data-container2 {
      margin-bottom: 15px;
      width: 100%;
      display: flex;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 75px 0 25px;
      /* 年月日日期 */
      .dateBtn {
        cursor: pointer;

        span {
          display: inline-block;
          padding: 4px 16px;
          font-size: 16px;
          border-radius: 16px;
          color: #fff;
        }

        span.blueColor {
          color: #188EFD;
        }
      }

      /* switch 按钮 */
      .ec_switch_black {
        font-size: 16px;
        font-weight: 400;
        color: #fff;

        span {
          margin-right: 15px;
        }
      }

      /*.item {*/
      /*width: 78px;*/
      /*height: 100%;*/
      /*line-height: 42px;*/
      /*text-align: center;*/
      /*cursor: pointer;*/
      /*color: #ffffff;*/
      /*}*/

      .active {
        color: #FFFFFF;
        background: linear-gradient(90deg, #3494FF, #006DFF);
        box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
        border-radius: 16px;
      }

      .item:hover {
        color: #f7f7f7;
      }

      .rightBut {
        position: absolute;
        top: 12px;
        cursor: pointer;
        right: 10px;
      }
    }

    .el-row {
      display: flex;
    }
    .el-col {
      margin-bottom: 12px;
      padding:0 8px!important;
      box-sizing: border-box;
      .content {
        padding: 20px;
        height: 100%;
        background: #FFFFFF;
        box-shadow: 0px 8px 40px 0px rgba(0, 38, 115, 0.08);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .header {
        display: flex;

        .title {
          flex: 1;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #394565;
          position: relative;
          text-indent: 10px;
          letter-spacing: 1px;
        }

        .title:before {
          content: ""; /*CSS伪类用法*/
          position: absolute; /*定位背景横线的位置*/
          top: 4px;
          left: 0;
          width: 4px;
          height: 18px;
          background: #1890FF;
          border-radius: 2px;
        }
      }
    }
    .complete {
      .header {
        .title {
          margin-bottom: 37px;
        }
      }

      .center {
        text-align: center;

        .num {
          font-size: 45px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          margin-bottom: 27px;

          .mark {
            font-size: 24px;
            color: #394565;
            margin-left: 2px;
          }
        }

        /* 环比 */
        .statistics {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          margin-bottom: 20px;

          span {
            position: relative;
            display: inline-block;
            margin: 0 20px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #7988AD;
          }

          span.top_s:after {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #FF0000;
            position: absolute;
            top: 7px;
            right: -29px;
          }

          span.bottom_s:after {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 8px solid #15DE0B;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            top: 7px;
            right: -29px;
          }

        }

        .note {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          margin-bottom: 20px;
        }
      }

      .bottom {
        margin-bottom: 10px;
        color: red;
      }
    }

    .product {
      .center {
        display: flex;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        /*p:first-child {*/
        /*flex: 1;*/
        /*font-size: 50px;*/

        /*span {*/
        /*font-size: 18px;*/
        /*}*/
        /*}*/

        p:last-child {
          align-self: flex-end;
          font-size: 29px;

          /*span {*/
            /*font-size: 14px;*/
          /*}*/
        }
      }

      .bottom {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        letter-spacing: 2px;
        color: #7988AD;
        display: flex;

        p {
          &:first-child {
            flex: 1;

            span:first-child {
              margin-right: 27px;
            }

            span:nth-child(2) {
              margin-right: 36px;
            }
          }

          &:last-child {
            span {
              margin-right: 12px;
            }
          }
        }
      }
    }

    .price {
      .center {
        display: flex;

        .center-left {
          flex: 1;

          .left-title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            /*color: #999999;*/

            & + p {
              font-size: 45px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;

              span {
                &:last-child {
                  font-size: 16px;
                  margin-left: 10px;

                }
              }
            }
          }
        }

        .center-right {
          align-self: flex-end;

          span {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: #1890FF;
            border-radius: 50%;
            text-align: center;
            line-height: 80px;
            font-size: 55px;
            color: #FFFFFF;
          }
        }
      }

      .bottom {
        margin-top: 45px;

        span {
          font-family: Microsoft YaHei;
          font-weight: 400;

          &:nth-child(odd) {
            font-size: 14px;
            letter-spacing: 2px;
            color: #7988AD;

          }

          &:nth-child(even) {
            font-size: 16px;
            color: #333333;
            margin: 0 15px 0 10px;
          }
        }
      }
    }

    .white {
      background: #fff;
    }

    .night {



    }


  ::v-deep.wrapper {
    padding: 19px;
    box-sizing: border-box;


  }

  .note-wrapper {
    position: fixed;
    z-index: 100;
    left: 49%;
    top: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .load {
    img {
      width: 120px;
      margin: 0 auto;
    }
  }

  .noData {
    div {
      margin: 0 auto;
      position: relative;
      /*width: 20%;*/
      min-height: 20%;
    }
  }
  }
  .echartsItem.whiteBg{
    background: #fff;
  }
  .echartsItem.nightBlack{
    background: #1C213E;
    .el-col {
      .content {
        background: #242B49;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      span {
        color: #fff;
      }

      .header {
        .title {
          color: #FFFFFF;
        }
      }

      &.complete {
        .center {
          .num {
            color: #1890FF;
            .mark{
              color:#fff

            }
          }

          .note {
            color: #fff;
          }
          .statistics span{color:#fff}


        }

        .bottom {
          .el-progress {
            .el-progress-bar__inner {
              background-image: linear-gradient(to right, #6F5DF6, #C55FF9);
            }

            .el-progress-bar__outer {
              background: #DDDDDD;
            }
          }
        }
      }

      .product {
        .center {
          p {
            &:first-child {
              color: #E9975F;

              span {
                color: #fff;
              }
            }

            &:last-child {
              color: #fff;

              span {
                color: #fff;
                margin-left: 2px;

              }
            }
          }
        }

        .bottom {
          p {
            &:first-child {
              span {
                color: #1890FF;

                &:first-child {
                  color: #fff;
                }
              }
            }

            &:last-child {
              span {
                color: #1890FF;
              }

              .el-icon-top {
                color: #8FD835;
              }
            }
          }
        }
      }

      &.price {
        .center {
          .center-left .left-title {
            color: #fff;

            & + p {
              color: #F09A60;

              span {
                &:last-child {
                  color: #999999;
                }
              }
            }
          }
        }

        .bottom {
          span {
            &:nth-child(odd) {
              color: #fff;

            }

            &:nth-child(even) {
              color: #8FD835;
            }
          }
        }
      }
    }
  }
</style>
